<template>
<div class="yingmoo-column">
  <div class="navstrip"></div>
  <div class="navbag">
    <div class="column-navbar">
      <h1 class="column-title" @mouseenter='shos=1' @mouseleave='shos=0'>
        <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
        <span class="column-name">全部媒体分类</span>
        <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
      </h1>
      <ul class="media-nav-tab" @mouseenter='shos=1;shon=2' @mouseleave='shos=0,shon=0' v-show='shos==1'>
        <span @mouseenter="getLeafNode('市区媒体','1011')">
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMediaDowntown'}" to="/ymMediaDowntown">
            <li @click="curr=1,setcurr(1)" :style='{"background-color":curr==1? "#c7e8fa" :"","color":curr==1? "#f29600" : ""}'>市区媒体</li>
          </router-link>
        </span>
        <span @mouseenter="getLeafNode('高速媒体',1002)">
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymHighspeed'}" to="/ymHighspeed">
            <li @click="curr=2,setcurr(2)" :style='{"background-color":curr==2? "#c7e8fa" :"","color":curr==2? "#f29600" : ""}'>高速媒体</li>
          </router-link>
        </span>
        <span @mouseenter="getLeafNode('公交媒体',1001)">
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMediaPublic'}" to="/ymMediaPublic" >
            <li @click="curr=3,setcurr(3)" :style='{"background-color":curr==3? "#c7e8fa" :"","color":curr==3? "#f29600" : ""}'>公交媒体</li>
          </router-link>
        </span>
        <span @mouseenter="getLeafNode('地铁媒体',1004)">
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMetro'}" to="/ymMetro" >
            <li @click="curr=4,setcurr(4)" :style='{"background-color":curr==4? "#c7e8fa" :"","color":curr==4? "#f29600" : ""}'>地铁媒体</li>
          </router-link>
        </span>
        <span @mouseenter="getLeafNode('机场媒体',1003)">
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymAirport'}" to="/ymAirport">
            <li @click="curr=5,setcurr(5)" :style='{"background-color":curr==5? "#c7e8fa" :"","color":curr==5? "#f29600" : ""}'>机场媒体</li>
          </router-link>
        </span>
        <span @mouseenter="getLeafNode('火车媒体',1005)" :style='{"background-color":curr==6? "#c7e8fa" :""}'>
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMediaTrain'}" to="/ymMediaTrain">
            <li @click="curr=6,setcurr(6)" :style='{"background-color":curr==6? "#c7e8fa" :"","color":curr==6? "#f29600" : ""}'>火车媒体</li>
          </router-link>
        </span>
        <span @mouseenter="getLeafNode('客运站媒体','1010')" :style='{"background-color":curr==7? "#c7e8fa" :""}' @click="curr=7">
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymPassenger'}" to="/ymPassenger">
            <li @click="curr=7,setcurr(7)" :style='{"background-color":curr==7? "#c7e8fa" :"","color":curr==7? "#f29600" : ""}'>客运站媒体</li>
          </router-link>
        </span>
        <span @mouseenter="getLeafNode('楼宇媒体',1006)">
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymBuilding'}" to="/ymBuilding">
            <li @click="curr=8,setcurr(8)" :style='{"background-color":curr==8? "#c7e8fa" :"","color":curr==8? "#f29600" : ""}'>楼宇媒体</li>
          </router-link>
        </span>
        <span @mouseenter="getLeafNode('商超媒体','1015')">
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymSuper'}" to="/ymSuper">
            <li @click="curr=9,setcurr(9)" :style='{"background-color":curr==9? "#c7e8fa" :"","color":curr==9? "#f29600" : ""}'>商超媒体</li>
          </router-link>
        </span>
        <span @mouseenter="getLeafNode('特色区域媒体','1009')">
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymFeature'}" to="/ymFeature">
            <li @click='curr=10,setcurr(10)' :style='{"background-color":curr==10? "#c7e8fa" :"","color":curr==10? "#f29600" : ""}'>特色区域媒体</li>
          </router-link>
        </span>
      </ul>
      
      <div class="coverage" @mouseenter='shos=1' @mouseleave='shos=0' v-show='shos==1'>
        <button>{{title}}</button>
        <ul v-for="node in content" :key="node.chName">
          <li style="float: left; width: 80px;cursor: pointer;" @click="toMediaList(node.chName)">{{node.chName}}</li>
        </ul>
      </div>

    </div>
    <ul class="column-subtitle clearfix">
      <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymIndex'}" to="/">
        <li :style='{"background-color":currIndex==1? "#0f93f2" :""}' @click="currIndex=1,setcurrIndex(1)">首页</li>
      </router-link>
      <router-link tag="li" :class="{'router-link-exact-active': $route.name=='/ymStore'}" to="/ymStore">
        <li :style='{"background-color":currIndex==2? "#0f93f2" :""}' @click="currIndex=2,setcurrIndex(2)">商城</li>
      </router-link>
      <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymCase'}" to="/ymCase">
        <li :style='{"background-color":currIndex==3? "#0f93f2" :""}' @click="currIndex=3,setcurrIndex(3)">案例展示</li>
      </router-link>
      <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymNews'}" to="/ymNews">
        <li :style='{"background-color":currIndex==4? "#0f93f2" :""}' @click="currIndex=4,setcurrIndex(4)">新闻</li>
      </router-link>
      <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymStore'}" to="/ymStore">
        <li :style='{"background-color":currIndex==5? "#0f93f2" :""}' @click="currIndex=5,setcurrIndex(5)">国际媒体</li>
      </router-link>
      <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymExpert'}" to="/ymExpert">
        <li :style='{"background-color":currIndex==6? "#0f93f2" :""}' @click="currIndex=6,setcurrIndex(6)">鹰监测</li>
      </router-link>
      <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMember'}" to="/ymMember">
        <li :style='{"background-color":currIndex==7? "#0f93f2" :""}' @click="currIndex=7,setcurrIndex(7)">会员中心</li>
      </router-link>
    </ul>
  </div>
  
</div>
</template>

<script>
  export default {
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        title: null,
        content: [],
        shos: 0,
        currIndex: -1,
        params:{},
        curr:''
      }
    },
    mounted: function () {
      this.getcurrIndex()
      this.getcurr()
//      console.log(this.getcurrIndex())
      
    },
    methods: {
      greet: function(event) {

      },
      getLeafNode: function(title, code) {
        this.title = title;
        this.$http.post(this.requestAddr+"/GetJson/getLeftNode", {
          "autoCode": code
        }, {
          emulateJSON: true
        }).then(
          (res) => {
            this.content = res.data.nodes;
          },
          (error) => {
            console.log(error);
          }
        );
      },
      setcurr:function(ear){
        window.sessionStorage.setItem('ear',ear)
        window.sessionStorage.removeItem('index')
        console.log(ear)
      },
      getcurr:function(){
        this.curr= window.sessionStorage.getItem('ear')
        console.log(sessionStorage.getItem('ear'))
      },
      setcurrIndex: function(index) {
        if(index==7){
          window.sessionStorage.removeItem('index')
         }else{
           window.sessionStorage.setItem('index', index)
         }
      },
      getcurrIndex:function(){
        this.currIndex = window.sessionStorage.getItem('index')
        console.log(sessionStorage.getItem('index'))
      },
      toMediaList:function(key){
      	console.log(key);
      	this.params.categoryCode='';
      	this.params.mediaArea='';
      	this.params.key = key;
				sessionStorage.setItem("params",JSON.stringify(this.params));
				window.location.href = "../#/ymList?date="+new Date();
      }
    }
  }

</script>

<style scoped lang="less">
  .bg {
    background: red !important;
  }

  .yingmoo-column {
    height: 44px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    .navstrip {
      width: 100%;
      height: 44px;
      background-color: #3fa9f5;
    }
    .navbag {
      width: 1200px;
      height: 44px;
      margin: 0 auto;
      position: relative;
      top: -44px;
      .column-navbar {
        .column-title {
          width: 247px;
          background-color: #036eb7;
          text-align: center;
          line-height: 44px;
          font-size: 16px;
          color: #f29600;
          position: relative;
          .column-arrow {
            position: absolute;
            top: 0;
            left: 247px;
            z-index: 90;
          }
        }
        .media-nav-tab {
          float: left;
          width: 247px;
          z-index: 11;
          background-image: url(../assets/ym-index/bg-left1.png);
          background-repeat: no-repeat;
          background-color: #036eb7;
          background-position: bottom;
          position: absolute;
          /*
        li:nth-child(1) {
          padding-top: 4px;
        }
*/
          li {
            color: white;
            text-align: center;
            line-height: 45px;
            font-size: 15px;
            &:hover {
              color: #f29600;
              background-color: #c7e8fa;
              cursor: pointer;
            }
          }
        }
        .coverage {
          width: 249px;
          height: 450px;
          background-color: rgba(217, 239, 252, 0.6);
          z-index: 999;
          position: absolute;
          top: 45px;
          left: 247px;
          button {
            width: 130px;
            height: 45px;
            background-color: #f29600;
            color: white;
            text-align: center;
            border: none;
            font-size: 16px;
            margin-left: 60px;
            margin-top: 15px;
          }
          ul {
            margin-left: 40px;
            margin-top: 30px;
            li {
              list-style: none;
              line-height: 32px;
              font-size: 14px;
              color: #333333;
            }
            li:hover {
              color: #f29600;
            }
          }
          ul:nth-child(2) {
            float: left;
            margin-right: 50px;
          }

        }
      }
      .column-subtitle {
        width: 953px;
        height: 44px;
        margin-left: 247px;
        background-color: #3fa9f5;
        display: flex;
        justify-content: space-between;
        line-height: 44px;
        color: white;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        li {
          width: 136px;
          text-align: center;
          color: #fff;
          font-size: 15px;
          background-image: url(../assets/ym-index/bg-nav.png);
          background-position: left center;
          background-repeat: no-repeat;
          &:last-child {
            border-right: none;
          }
          &:hover {
            background-color: darken(#3fa9f5, 10%);
          }
        }
      }
    }
  }

</style>
